<template>
  <div class="animate__animated animate__fadeInUp">
    <div class="datr">
      <p class="ga"></p>
      <span class="chryu">角色管理</span>
    </div>
    <el-card shadow="never">
      <div
        class="bigre animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <span>权限管理</span>
        <p>
          <el-row>
            <el-button size="small" @click="fanhui">返回</el-button>
          </el-row>
        </p>
      </div>
      <div class="border">
        <div class="mt-3">
          <p class="d-flex border-bottom">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              class="f-weiht f-size"
              >{{ tuanke }}</el-checkbox
            >
          </p>

          <div style="margin: 20px 0"></div>
          <p class="d-flex border-right">
            <el-checkbox-group
              true-label
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </p>
        </div>

        <!-- 私教课程管理 -->
        <div class="mt-3">
          <p class="d-flex">
            <el-checkbox
              :indeterminate1="isIndeterminate1"
              v-model="checkAll1"
              @change="handleCheckAllChange1"
              class="f-weiht f-size"
              >私教课程管理</el-checkbox
            >
          </p>
          <hr />
          <div style="margin: 15px 0"></div>
          <p class="d-flex">
            <el-checkbox-group
              v-model="checkedCities1"
              @change="handleCheckedCitiesChange1"
            >
              <el-checkbox v-for="city in cities1" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </p>
        </div>

        <!-- 订单管理 -->
        <div class="mt-3">
          <p class="d-flex">
            <el-checkbox
              :indeterminate2="isIndeterminate2"
              v-model="checkAll2"
              @change="handleCheckAllChange2"
              class="f-weiht f-size"
              >订单管理</el-checkbox
            >
          </p>
          <hr />
          <div style="margin: 15px 0"></div>
          <p class="d-flex">
            <el-checkbox-group
              v-model="checkedCities2"
              @change="handleCheckedCitiesChange2"
            >
              <el-checkbox v-for="city in cities2" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </p>
        </div>

        <!-- 用户管理 -->
        <div class="mt-3 mb-5">
          <p class="d-flex">
            <el-checkbox
              :indeterminate3="isIndeterminate3"
              v-model="checkAll3"
              @change="handleCheckAllChange3"
              class="f-weiht f-size"
              >用户管理</el-checkbox
            >
          </p>
          <hr />
          <div style="margin: 15px 0"></div>
          <p class="d-flex">
            <el-checkbox-group
              v-model="checkedCities3"
              @change="handleCheckedCitiesChange3"
            >
              <el-checkbox v-for="city in cities3" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </p>
        </div>
      </div>
      <div class="mt-5">
        <el-row>
          <el-button @click="baocunanniu()" type="primary">保存</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { color } from "echarts";
const cityOptions = ["团课增加、修改", "团课列表", "团课查询", "团课课程表"];
const cityOptions1 = ["增加私教课", "私教删除", "私教查询", "私教课修改"];
const cityOptions2 = ["订单查询", "订单删除", "订单添加", "订单修改"];
const cityOptions3 = ["查询用户", "修改用户", "删除用户", "增加用户"];
export default {
  data() {
    return {
      ids:[],
      user: 0, //sessionStorage存的id
      tuanke: "团课管理",
      //  团课管理
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: false,
      //私教课程管理
      checkAll1: false,
      checkedCities1: [],
      cities1: cityOptions1,
      isIndeterminate1: false,

      //订单管理
      checkAll2: false,
      checkedCities2: [],
      cities2: cityOptions2,
      isIndeterminate2: false,
      //用户管理
      checkAll3: false,
      checkedCities3: [],
      cities3: cityOptions3,
      isIndeterminate3: false,
    };
  },
  methods: {
    // 接收权限设置的id
    jieshoshuju() {
      // let mas = JSON.stringify(this.$route.params.user);
      let mas = this.$route.params.user;
      // console.log(mas);
      //  console.log(user,333333333333333)
      //  console.log(typeof user,333333333333333)
      //let user = sessionStorage.getItem("user");
      // if(mas!=user){
      //  user != null
      //   ? sessionStorage.setItem("user", mas)
      //   : sessionStorage.setItem("user", mas);
      // }else{
      //user != null
      //? sessionStorage.setItem("user", user)
      //: sessionStorage.setItem("user", mas);
      // }
      // this.user=JSON.parse(sessionStorage.getItem("user"))
      if (mas) sessionStorage.setItem("userjiao", mas);
      this.user = this.$route.params.user || sessionStorage.getItem("userjiao");
      console.log(this.user);
      // sessionStorage.removeItem('user');
      // let aa=JSON.parse(sessionStorage.getItem("user"))
      //console.log(aa)
    },
    // 查询所有权限
    chaxunjiaosequanxian() {
      this.$axios({
        url: "gym/role/findPrivilegeByRoleId",
        method: "post",
        data: {
          id: this.user,
        },
      }).then((res) => {
        console.log(res)
        for(let i in res.data.data){
              if(res.data.data[i].id==5 || res.data.data[i].id==6 || res.data.data[i].id==7 || res.data.data[i].id==8){
                  this.checkedCities.push(res.data.data[i].name)
              }
              else if(res.data.data[i].id==9 || res.data.data[i].id==10 || res.data.data[i].id==11 || res.data.data[i].id==12){
                  this.checkedCities1.push(res.data.data[i].name)
              }
              else if(res.data.data[i].id==13 || res.data.data[i].id==14 || res.data.data[i].id==16 || res.data.data[i].id==15){
                  this.checkedCities2.push(res.data.data[i].name)
              }
              else if(res.data.data[i].id==17 || res.data.data[i].id==18 || res.data.data[i].id==19 || res.data.data[i].id==20){
                  this.checkedCities3.push(res.data.data[i].name)
              }
            

            
        }
       
        // console.log(this.checkedCities);
        // console.log(this.checkedCities1);
        // console.log(this.checkedCities2);
        // console.log(this.checkedCities3);
      });
    },
    //  团课管理
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //私教课程管理
    handleCheckAllChange1(val) {
      
      this.checkedCities1 = val ? cityOptions1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount1 = value.length;
      this.checkAll1 = checkedCount1 === this.cities1.length;
      this.isIndeterminat1e =
        checkedCount1 > 0 && checkedCount1 < this.cities.length;
    },
    //订单管理
    handleCheckAllChange2(val) {
      this.checkedCities2 = val ? cityOptions2 : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount2 = value.length;
      this.checkAll2 = checkedCount2 === this.cities.length;
      this.isIndeterminate2 =
        checkedCount2 > 0 && checkedCount2 < this.cities.length;
    },
    //用户管理
    handleCheckAllChange3(val) {
      this.checkedCities3 = val ? cityOptions3 : [];
      this.isIndeterminate3 = false;
    },
    handleCheckedCitiesChange3(value) {
      let checkedCount3 = value.length;
      this.checkAll3 = checkedCount3 === this.cities.length;
      this.isIndeterminate3 =
        checkedCount3 > 0 && checkedCount3 < this.cities.length;
    },
    // 保存确定时
    baocunanniu() {
     console.log(this.checkedCities)
      for (let i=0; i<this.checkedCities.length;i++) {
        if (this.checkedCities[i] == "团课增加、修改") {
          // this.checkedCities[i] = 5;
          this.ids.push(5);
          // console.log(this.checkedCities);
        } else if (this.checkedCities[i] == "团课列表") {
          // this.checkedCities[i] = 6;
           this.ids.push(6);
        } else if (this.checkedCities[i] == "团课查询") {
          // this.checkedCities[i] = 7;
           this.ids.push(7);
        } else if (this.checkedCities[i] == "团课课程表") {
          // this.checkedCities[i] = 8;
           this.ids.push(8);
        }
      };
      for (let i=0; i<this.checkedCities1.length;i++) {
        if (this.checkedCities1[i] == "增加私教课") {
          // this.checkedCities1[i] = 9;
           this.ids.push(9);
          // console.log(this.checkedCities);
        } else if (this.checkedCities1[i] == "私教删除") {
          // this.checkedCities1[i] = 10;
           this.ids.push(10);
        } else if (this.checkedCities1[i] == "私教查询") {
          // this.checkedCities1[i] = 11;
           this.ids.push(11);
        } else if (this.checkedCities1[i] == "私教课修改") {
          // this.checkedCities1[i] = 12;
           this.ids.push(12);
        }
      };
      for (let i=0; i<this.checkedCities2.length;i++) {
        if (this.checkedCities2[i] == "订单查询") {
          // this.checkedCities2[i] = 13;
           this.ids.push(13);
          // console.log(this.checkedCities);
        } else if (this.checkedCities2[i] == "订单删除") {
          // this.checkedCities2[i] = 14;
           this.ids.push(14);
        } else if (this.checkedCities2[i] == "订单添加") {
          // this.checkedCities2[i] = 15;
           this.ids.push(15);
        } else if (this.checkedCities2[i] == "订单修改") {
          // this.checkedCities2[i] = 16;
           this.ids.push(16);
        }
      };
      for (let i=0; i<this.checkedCities3.length;i++) {
        if (this.checkedCities3[i] == "查询用户") {
          // this.checkedCities3[i] = 17;
           this.ids.push(17);
          // console.log(this.checkedCities);
        } else if (this.checkedCities3[i] == "修改用户") {
          // this.checkedCities3[i] = 18;
           this.ids.push(18);
        } else if (this.checkedCities3[i] == "删除用户") {
          // this.checkedCities3[i] = 19;
           this.ids.push(19);
        } else if (this.checkedCities3[i] == "增加用户") {
          // this.checkedCities3[i] = 20;
           this.ids.push(20);
        }
      };
      // console.log(this.checkedCities)
      // console.log(this.checkedCities1)
      // console.log(this.checkedCities2)
      // console.log(this.checkedCities3)

      this.$axios({
        url:"gym/role/update",
        method:"post",
        data:{
          id:this.user,
          privilegeIds:this.ids.toString()
        }
      }).then((res)=>{
            if (
                (res.data.code >= 200 && res.data.code < 300) ||
                res.data.code == 304
              ) {
                this. chaxunjiaosequanxian();
                this.$message({
                  type: "success",
                  message: "修改成功!",
                  
                });
                this.checkedCities=[];
                this.ids=[];
                
             
              } else {
                this.$message.error("修改失败");
                this.checkedCities=[];
                this.ids=[];
                console.log(this.ids,11111)
                console.log(this.checkedCities,22222)
              }
        // console.log(res)
      })
    },
    // 返回
    fanhui() {
       sessionStorage.clear("user");
      this.$router.push("character");
    },
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    this.jieshoshuju();
    this.chaxunjiaosequanxian();
  },
  // 挂载后
  mounted() {
    // this.diji()
    console.log(this.total);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}
</style>
